<template>
  <!-- 轮播图 -->
  <div class="carousel">
    <div class="carousel-images">
      <img
        :src="images[currentIndex]"
        :key="currentIndex"
        alt="carousel image"
      />
    </div>
    <!-- 圆点导航 -->
    <div class="carousel-dots">
      <!-- span的类用v-bind动态数据绑定了，三目运算符，当图片数组索引和span的数组索引一致时他的类为active否则为no-active，通过此法更改原点的背景颜色 -->
      <span
        v-for="(dot, index) in images"
        :key="index"
        :class="[index === currentIndex ? 'active' : 'no-active']"
        @click="spanclick(index)"
      >
      </span>
      <!-- span还监听了点击事件，当点击时就调用名为spanclick的方法，执行里面的代码-->
    </div>
  </div>
</template>  
  
<script>
export default {
  data() {
    return {
      images: [
        "https://cdn.pinduoduo.com/upload/home/img/subject/girlclothes.jpg",
        "https://m.360buyimg.com/babel/jfs/t1/249496/22/1031/104443/658d328aFa6e96023/5bd09a5b69c219bc.jpg.webp",
        "https://cdn.pinduoduo.com/upload/shoes.jpg",
      ],
      currentIndex: 0, // 当前显示的图片索引，索引0就是第一张图，索引1就是第二张图，索引2就是第三张图，
      timer: null, // 用于存储计时器的ID ,每个计时器都有自己的id
    };
  },
  mounted() {
    //挂载后阶段调用一次startAutoSlideshow()方法。在组件挂载后开始轮播
    this.startAutoSlideshow();
  },
  beforeDestroy() {
    this.stopAutoSlideshow(); //解绑阶段前又调用一次startAutoSlideshow()方法。在组件销毁前停止轮播
  },
  methods: {
    //计时器方法，每搁3秒就会自动执行一次，并调用nextImage()
    startAutoSlideshow() {
      this.timer = setInterval(() => {
        this.nextImage(); // 切换到下一张图片
      }, 3000); // 每3秒自动切换图片
    },
    stopAutoSlideshow() {
      clearInterval(this.timer);
    },

    //更改图片数组索引值的方法，0、1、2。数组索引更改后图片就会更改，即更改图片的方法
    nextImage() {
      if (this.currentIndex < this.images.length - 1) {
        this.currentIndex++; //当图片数组索引的值是0和1就加1，否则如果是2了就执行下面的else重制为0
      } else {
        this.currentIndex = 0; // 如果已经是最后一张图片，则回到第一张图片
      }
    },
    spanclick(index) {
      //当点击某个span时就会调用这个方法，并把点击的span的索引赋值给currentIndex，数据改动重新渲染。
      if (this.timer) {
        //检查是否存在一个正在运行的计时器（通过检查 this.intervalId 是否存在）。如果存在，这意味着有一个定时器正在运行，因此需要先停止它。
        clearInterval(this.timer); // 清除当前的计时器
        this.currentIndex = index;// 重置当前索引为点击的圆点索引 
        this.startAutoSlideshow()//调用上面的那个方法，重新开始计时
      }

      // this.timer=null
    },
  },
};
</script>
<style scoped>
.carousel {
  position: relative;
}
.carousel .carousel-images img {
  width: 100%;
  height: 190px;
}
.carousel-dots {
  margin: 0 auto;
  display: inline;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.active {
  background-color: rgb(255, 255, 255);
}
.no-active {
  background-color: #5555556b
}
.carousel-dots span {
  display: inline-block;
  width: 11px;
  height: 11px;

  margin-right: 10px;
  border-radius: 50%;
}
</style>